<template>
  <div class="school">
      <h2>我是School组件</h2>
      <h4>学校名称：{{school.name}}</h4>
      <h4>学校地址：{{school.address}}</h4>
      <h4>学校年龄：{{school.age}}</h4>
      <h4>下方Saying组件中语录长度是：{{sayingList.length}}</h4>
      <select v-model.number='n'>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>&nbsp;&nbsp;
      <button @click="incrementSchoolAge(n)">点击增加学校校龄+n</button>
  </div>
</template>

<script>
import {mapMutations, mapState} from 'vuex'
  export default {
      name:'School',
      data(){
          return {
              n:1
          }
      },
      methods: {
          ...mapMutations({incrementSchoolAge:'INCREMENT_SCHOOL_AGE'})
      },
      computed: {
          ...mapState(['school','sayingList'])
      },
  }
</script>

<style scoped>
  .school{
background-color:skyblue ;
padding: 20px;
  }
</style>